<template>
  <div id="content">
      <headerNav :menu="showMenu" :menuList="login.pageList"></headerNav>
      <header>
        <p>当前模块：模板管理  当前登录人：{{login.name}}  登录时间：{{login.loginTime | timeFormat}}</p>
        <div>
        <el-button size="mini" type="primary" @click="$router.push('login')" icon="el-icon-delete">退出</el-button>
        <el-button size="mini" type="primary" @click="reflash()" icon="el-icon-refresh">刷新</el-button>
        </div>
      </header>
      <div class="wrap">
        <el-row class="tac">
          <el-col :span="6">
             <div class="left-wrap">
             <el-menu
              ref="menu"
              default-active="01-1"
              class="el-menu-vertical-demo"
              :default-openeds="['01']"
              @select="menuSelect"
              >
              <el-submenu v-for="(val, key) in tmpl" :index="key">
                   <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>模板列表</span>
                  </template>
                   <el-menu-item-group>
                    <template slot="title">{{val.classify}}</template>
                    <el-menu-item v-for="(item,index) in val.files" :index="`${key}-${index+1}`">{{item.fileName}}</el-menu-item>
                  </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
          </el-col>
          <el-col :span="18">
            <div class="right-wrap">
              <div class="html-render">
                <el-button v-show="cfilepath" style="margin:8px 16px;" type="primary" @click="exportWord()">导出word</el-button>
                <iframe v-show="cfilepath" :src="cfilepath" width="100%" height="100%" frameborder="0" ref="htmlCon"></iframe>
                <div v-show="!cfilepath">
                  <h2 style="padding:16px;">您还未转换模板，请先转换模板！</h2>
                  <el-button style="margin:0 16px;" type="primary" @click="tansTpl()">转换模板</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>
<script>
  import {timeFormat} from '../../assets/time.js'
  import headerNav from '../header.vue'
  import mammoth from 'mammoth'
  export default {
    components: {headerNav},
    name: 'tmpl',
    data () {
      return {
        showMenu: true,
        login: {
          name: '',
          loginTime: '',
          pageList: []
        },
        activeName: 'first',
        tmpl: {},
        cfilepath: ''
      }
    },
    filters: {
      timeFormat: function (val) {
        return val ? timeFormat(val, 'yyyy-MM-dd hh:mm:ss') : ''
      }
    },
    mounted: function () {
      this.getLoginMess()
      this.getTmplList()
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      reflash () {
        location.reload()
      },
      getLoginMess () {
        this.$http.get('http://localhost:9081/getLoginMess').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.login = Object.assign(res.data.data)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      getTmplList () {
        this.$http.get('http://localhost:9081/tmpl/list').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            console.log(res.data.data)
            this.tmpl = res.data.data
            this.$nextTick().then(() => {
              // 触发第一个点击
              this.menuSelect('01-1')
            })
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      menuSelect (index) {
        let [cl, clp] = index.split('-')
        this.currentMenu = this.tmpl[cl]['files'][Number(clp - 1)]
        this.currentClassify = cl
        let {filePath} = this.currentMenu
        if (filePath) {
          if(process.env.NODE_ENV == 'development'){
              this.cfilepath = '/static/' + filePath
              // this.$http.get('/static/' + filePath).then((res) => {
              //   // this.$refs.htmlCon.contentWindow.document.documentElement.innerHTML = res.data.replace('<html>', '').replace('</html>', '')
                
              // })
          }else{
              // this.$http.get(__static + '/' + filePath).then((res) => {
              //   // this.$refs.htmlCon.contentWindow.document.documentElement.innerHTML = res.data.replace('<html>', '').replace('</html>', '')
              // })
              this.cfilepath = __static + '/' + filePath
          }
        } else {
          this.cfilepath = ''
        }
      },
      // 模板转换
      tansTpl (){
        let {origin} = this.currentMenu
        this.$http.post('http://localhost:9081/wordToHtml',{
          url:origin,
          cl:this.currentClassify
        }).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            // this.$refs.htmlCon.contentWindow.document.documentElement.innerHTML = res.data.data
            // this.isHasFile = true
            this.cfilepath = process.env.NODE_ENV == 'development' ? '/static/' + res.data.data : 'http://localhost:9081/static' + '/' + res.data.data
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      // 导出word
      exportWord (){
        try {
          // build环境下模式直接调取业务会跨域 改成postMessage方式
          // this.$refs.htmlCon.contentWindow.exportWord()
          this.$refs.htmlCon.contentWindow.postMessage({
            path:'http://localhost:9081/static',
            type:'exportWord'
          },'*')
        } catch (error) {
          console.log(error)
        }
      }
    }
}
</script>
<style scoped  lang="less">
    #content{
      header{
        width:100%;
        height:40px;
        background: #fff;
        border:1px solid #ccc;
        box-shadow: 0 1px rgba(0,0,0,.2);
        display: flex;
        font-size:16px;
        padding:4px 8px;
        align-items: center;
        justify-content: flex-end;
        p{
          padding-right:16px;
        }
      }

      .wrap{
        margin-top:8px;
        padding:16px;
        background: #fff;
        max-height: calc(100% - 130px);
        overflow-y:auto;
        h2{
          font-size:16px;
          line-height:32px;
        }
        .left-wrap{
          padding:16px;
          border:1px solid #ccc;
          background: #fff;
          border-right:none;
          height: 600px;
          .el-menu{
            border-right: none;
          }
        }
        .right-wrap{
          // padding:16px;
          border:1px solid #ccc;
          background: #fff;
          height: 600px;
          .html-render{
            height:600px;
            overflow: hidden;
          }
        }
      }
    }
</style>